<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form
        ref="artFrom"
        :model="artFrom"
        :label-width="labelWidth"
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="景点搜索：" label-for="line_id">
              <Input
                search
                enter-button
                placeholder="景点名称"
                v-model="artFrom.scenic_name"
                @on-search="userSearchs"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
       <div class="Button">
        <Button type="primary" size="small" class="" icon="md-add" style="margin-right: 10px;" @click="showSmsModel=true">发送短信</Button>
      </div>
      <Table
        ref="table"
        :columns="columns"
        :data="tableList"
        class="ivu-mt"
        :loading="loading"
        highlight-row
        no-data-text="暂无数据"
        no-filtered-data-text="暂无筛选结果"
      >
        <template slot-scope="{ row }" slot="image">
          <viewer>
            <div class="tabBox_img">
              <img v-lazy="row.image" />
            </div>
          </viewer>
        </template>
        <template slot-scope="{ row, index }" slot="state">
          <i-switch
            v-model="row.status"
            :value="row.status"
            :true-value="1"
            :false-value="0"
            @on-change="changeSwitch(row)"
            size="large"
          >
            <span slot="open">上架</span>
            <span slot="close">下架</span>
          </i-switch>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <a size="small" @click="edit(row)">编辑</a>
        </template>
      </Table>
      <div class="acea-row row-right page">
        <Page
          :total="total"
          :current="artFrom.page"
          show-elevator
          show-total
          @on-change="pageChange"
          :page-size="artFrom.limit"
        />
      </div>

          <!-- 短信发送 -->
      <Modal v-model="showSmsModel"  width="50%"   scrollable   title="班次排班"  :mask-closable="false"   :z-index="1"   @on-cancel="closePlanForm('regularForm')"  @on-ok="submRegularForm('regularForm')"   >
        <Form
          class="formValidate mt20"
          ref="regularForm"
          :rules="ruleValidate"
          :model="regularForm"
          :label-width="labelWidth"
          :label-position="labelPosition"
          @submit.native.prevent
        >
          <Row :gutter="24" type="flex">
            <Col span="24">
              <FormItem label="线路名称："  prop="line_id" :label-width="100">
                <Select
                  placeholder="输入关键词选择线路"
                  v-model="regularForm.line_id"
                  @on-change="selectLine"
                  filterable
                  :remote-method="remoteMethod" 
                  @on-query-change="onQueryChange"
                  :loading="loading1">
                  <Option v-for="(item, index) in options" :value="item.line_id" :key="index">{{item.line_sn+item.line_name}}</Option>
              </Select>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="线路名称："  prop="regular_version_id" :label-width="100">
                <Select
                  v-model="regularForm.regular_version_id"
                  placeholder="请选择线路班次版本"
                >
                  <Option
                    v-for="item in regularVersionList"
                    :key="item.id"
                    :label="item.sales_desc"
                    :value="item.id"
                  />
              </Select>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="排班日期："  prop="plan_dates_range" :label-width="100">
                  <DatePicker :value="regularForm.plan_dates_range" @on-change="regularFormSelectDay" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择排班日期" style="width: 200px"></DatePicker>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="座位数量："  prop="seat" :label-width="100">
                  <InputNumber :min="0"  v-model="regularForm.seat"  ></InputNumber>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="班次类型："  prop="plan_type" :label-width="100">
                <RadioGroup v-model="regularForm.plan_type">
                    <Radio :label="1">固定班</Radio>
                    <Radio :label="2">流水班</Radio>
                    <Radio :label="3">预约班</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col v-if="regularForm.plan_type==2" span="24">
              <FormItem label="间隔时间(分钟)："  prop="division_time" :label-width="100">
                  <InputNumber :min="0"  v-model="regularForm.division_time"  ></InputNumber>
              </FormItem>
            </Col>
            <Col  v-if="regularForm.plan_type==3"  span="24">
              <FormItem  label="最低发车人数："  prop="lowest_num" :label-width="100">
                  <InputNumber :min="0"  v-model="regularForm.lowest_num"  ></InputNumber>
              </FormItem>
            </Col>
            <Col span="24" >
              <FormItem label="是否开启返程："  prop="is_return_trip" :label-width="100">
                <RadioGroup v-model="regularForm.is_return_trip">
                  <Radio :label="0">关闭</Radio>
                  <Radio :label="1">开启</Radio>
                </RadioGroup>
              </FormItem>
            </Col>
            <Col span="24"  v-if="regularForm.is_return_trip">
              <FormItem label="返程时间(分钟)："  prop="return_mins" :label-width="100">
                  <InputNumber :min="0"  v-model="regularForm.return_mins"  ></InputNumber>
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="备注："  prop="remark" :label-width="100">
                <Input v-model="regularForm.remark" maxlength="100" show-word-limit type="textarea" placeholder="输入班次备注" style="width: 200px" />
              </FormItem>
            </Col>
          </Row>
      
        </Form>   
      </Modal>
      <!-- 发送短信 --> 

    </Card>
    
</template>

<script>
import toExcel from "../../../utils/Excel.js";
import { mapState } from "vuex";
import {scenicLstApi,setStatusApi} from "@/api/scenic"
import {
  exportBusPassengerListApi,
  exportLinePlanListApi,
} from "@/api/line";

import exportExcel from "@/utils/newToExcel.js";

export default {
  name: "custom_busList",
  components: { },
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    ...mapState("admin/userLevel", ["categoryId"]),
    labelWidth() {
      return this.isMobile ? undefined : 75;
    },
    labelPosition() {
      return this.isMobile ? "top" : "right";
    },
  },
  data() {
    return {
      showSmsModel: false,
      template: false,
      modals: false,
      grid: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      artFrom: {
        scenic_name: '',
        page: 1,
        limit: 25
      },
      list: [],
      tableList: [],
      loading: false,
      columns: [
     
        {
          title: "景点ID",
          key: "id",
          width: 60,
        },
        {
          title: "景点名称",
          key: "scenic_name",
          width: 220,
        },
        {
          title: "封面图",
          slot: "image",
          minWidth: 100,
        },
        {
          title: "状态",
          slot: "state",
          width: 100,
          filters: [
            {
              label: "上架",
              value: 1,
            },
            {
              label: "下架",
              value: 0,
            },
          ],
          filterMethod(value, row) {
            return row.status === value;
          },
          filterMultiple: false,
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          minWidth: 100,
        },
      ],
      data: [],
      total: 0,
    
      // activeKey:1
    };
  },

  created() {
  },
  mounted() {
    this.getDataList();
  },
  methods: {
   // 上下架
    changeSwitch(row) {
      setStatusApi(row.id, row.status)
        .then((res) => {
          this.$Message.success(res.msg);
          this.getDataList();
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
       // 编辑
    edit(row) {
      this.$router.push({ path: "/admin/scenic/add_scenic?id=" + row.id });
    },
    // 数据导出；
    async exports() {
      let [th, filekey, data, fileName] = [[], [], [], ""];
      let formValidate = this.artFrom;
      this.$Spin.show();
      let lebData = await this.getExcelData(formValidate);
      this.$Spin.hide();
      if (!fileName) fileName = lebData.filename;
      if (!filekey.length) {
        filekey = lebData.filekey;
      }
      if (!th.length) th = lebData.header;
      if (lebData.export.length) {
        data = data.concat(lebData.export);
      }

      exportExcel(th, filekey, fileName, data);
    },

     // 数据；
    async exportPassenger() {
      let [th, filekey, data, fileName] = [[], [], [], ""];
      let planId = this.exportPlanId;
      this.$Spin.show();
      let lebData = await this.getPassengerExcelData(planId);
      this.$Spin.hide();
      if (!fileName) fileName = lebData.filename;
      if (!filekey.length) {
        filekey = lebData.filekey;
      }
      if (!th.length) th = lebData.header;
      if (lebData.export.length) {
        data = data.concat(lebData.export);
      }

      exportExcel(th, filekey, fileName, data);
    },
    
    getPassengerExcelData(planId) {
      return new Promise((resolve, reject) => {
        exportBusPassengerListApi({plan_id:planId}).then((res) => {
          return resolve(res.data);
        });
      });
    },
    getExcelData(excelData) {
      return new Promise((resolve, reject) => {
        exportLinePlanListApi(excelData).then((res) => {
          return resolve(res.data);
        });
      });
    },
   
    // 列表；
    getDataList() {
      this.loading = true;
      scenicLstApi(this.artFrom)
        .then((res) => {
          let data = res.data;
          this.tableList = data.list.map((item) => {
            if (this.isAll === 1) {
              item.checkBox = true;
            } else {
              item.checkBox = false;
            }
            return item;
          });
          this.total = res.data.count;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
   

    pageChange(status) {
      this.artFrom.page = status;
      this.getDataList();
      this.$refs.table.clearCurrentRow();
    },
    // 表格搜索
    userSearchs() {
      this.artFrom.page = 1;
      this.formSelection = [];
      this.getDataList();
    },
    


    
  },
};
</script>
<style scoped lang="stylus">
/deep/.ivu-modal-mask {
  z-index: 999 !important;
}

/deep/.ivu-modal-wrap {
  z-index: 999 !important;
}

.Box {
  >>> .ivu-modal-body {
    height: 700px;
    overflow: auto;
  }
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

/deep/.ivu-table-cell-expand-expanded {
  margin-top: -6px;
  margin-right: 33px;
  transition: none;

  .ivu-icon {
    vertical-align: 2px;
  }
}

/deep/.ivu-table-header {
  // overflow visible
}

/deep/.ivu-table th {
  overflow: visible;
}

/deep/.select-item:hover {
  background-color: #f3f3f3;
}

/deep/.select-on {
  display: block;
}

/deep/.select-item.on {
  background: #f3f3f3;
}
</style>